<template>
  <div>
    <top-bar>
      <div class="search-input" slot="search-input">
        <div class="con-bg gfc-grey1">搜索新闻、大师或订单</div>
        <div class="icon"></div>
      </div>
      <div class="msg" slot="r-btn">
        <div>
          <div class="msg-num gfc-white align-c">1</div>
        </div>
      </div>
    </top-bar>
    <div class="content">
      <div class="hero-list">
        <div class="title items-bet gfc-grey1 con-bg">
          <div>英雄榜</div>
          <div class="gfc-white">更多</div>
        </div>
        <ul class="flex">
          <li class="flex-1">
            <div class="syl con-bg">
              <div class="icon"></div>
              <div class="text gfc-grey1">收益率</div>
              <img class="photo" src="http://via.placeholder.com/135x135"/>
              <div class="name gfc-grey1">名字</div>
              <div class="num gfc-orange2">800.00%</div>
            </div>
          </li>
          <li class="flex-1">
            <div class="yk con-bg">
              <div class="icon"></div>
              <div class="text gfc-grey1">盈亏</div>
              <img class="photo" src="http://via.placeholder.com/135x135"/>
              <div class="name gfc-grey1">名字</div>
              <div class="num gfc-orange2">$20000</div>
            </div>
          </li>
          <li class="flex-1">
            <div class="gsz con-bg">
              <div class="icon"></div>
              <div class="text gfc-grey1">跟随者</div>
              <img class="photo" src="http://via.placeholder.com/135x135"/>
              <div class="name gfc-grey1">名字</div>
              <div class="num gfc-orange2">200人</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="news con-bg">
        <div class="title items-bet gfc-grey1">
          <div>新闻</div>
          <div>1小时前</div>
        </div>
        <div class="con">
          <div class="text-overflow gfc-grey1">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</div>
          <div class="text-overflow-multi gfc-white">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</div>
        </div>
        <div class="handle flex gfc-white align-c">
          <div class="flex-1">
            <div class="fbz">发布者</div>
          </div>
          <div class="flex-1">
            <div class="qjy">去交易</div>
          </div>
        </div>
      </div>
      <div class="news con-bg">
        <div class="title items-bet gfc-grey1">
          <div>新闻</div>
          <div>1小时前</div>
        </div>
        <img class="pic" src="http://via.placeholder.com/824x280" alt="">
        <div class="con">
          <div class="text-overflow gfc-grey1">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</div>
          <div class="text-overflow-multi gfc-white">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</div>
        </div>
        <div class="handle flex gfc-white align-c">
          <div class="flex-1">
            <div class="praise">25</div>
          </div>
          <div class="flex-1">
            <div class="comment">24</div>
          </div>
        </div>
      </div>
      <div class="master con-bg">
        <div class="info flex">
          <img class="photo" src="http://via.placeholder.com/135x135" alt="">
          <div class="basic flex-1">
            <div class="name gfc-white">名字名字</div>
            <div class="flex">
              <div class="flex-1">粉丝<span class="gfc-orange2">56</span></div>
              <div class="flex-1">总排名<span class="gfc-orange2">100</span></div>
            </div>
          </div>
          <div class="copy-btn gfc-white align-c">跟随</div>
        </div>
        <div class="trade">
          <div class="flex">
            <div class="flex-1 gfc-orange2 action">买入</div>
            <div class="flex-1 gfc-white align-c">EURTRY</div>
            <div class="flex-1 gfc-white align-r">$50000</div>
          </div>
        </div>
        <div class="handle flex gfc-white align-c">
          <div class="flex-1">
            <div class="praise">25</div>
          </div>
          <div class="flex-1">
            <div class="comment">24</div>
          </div>
        </div>
      </div>
      <div class="master con-bg">
        <div class="info flex">
          <img class="photo" src="http://via.placeholder.com/135x135" alt="">
          <div class="basic flex-1">
            <div class="name gfc-white">名字名字</div>
            <div class="flex">
              <div class="flex-1">粉丝<span class="gfc-orange2">56</span></div>
              <div class="flex-1">总排名<span class="gfc-orange2">100</span></div>
            </div>
          </div>
          <div class="sell-price gfc-orange2 align-c">$1313</div>
        </div>
        <div class="trade">
          <div class="flex sell">
            <div class="flex-1 gfc-green action">卖出</div>
            <div class="flex-1 gfc-white align-c">EURTRY</div>
            <div class="flex-1 gfc-white align-r">$50000</div>
          </div>
        </div>
        <div class="handle flex gfc-white align-c">
          <div class="flex-1">
            <div class="praise">25</div>
          </div>
          <div class="flex-1">
            <div class="comment">24</div>
          </div>
        </div>
      </div>
      <div class="tips align-c">
        <div class="text gfc-white">亲~您入金的$1000已到账，<br>请到我的账户中进行查看！</div>
        <div class="arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {}
    },
    components: {
      topBar
    },
    mounted(){
      this.asyncHttp('get', '/api/detections', {}, function (res) {
        console.log(res)
      })
    }
  }
</script>

<style scoped>
  .top-bar .search-input {
    padding: .07rem .63rem .07rem .18rem;
    position: relative;
  }

  .top-bar .search-input .con-bg {
    height: .3rem;
    line-height: .3rem;
    border-radius: .04rem;
    font-size: .16rem;
    padding-left: .5rem;
  }

  .top-bar .search-input .icon {
    position: absolute;
    top: .11rem;
    left: .28rem;
    width: .22rem;
    height: .22rem;
    background: url("../../assets/search1.png") no-repeat 0/100% 100%;
  }

  .top-bar .msg {
    position: absolute;
    top: 0;
    right: .07rem;
    width: .44rem;
    height: .44rem;
  }

  .top-bar .msg > div {
    width: .22rem;
    height: .22rem;
    margin: .11rem auto;
    background: url("../../assets/msg.png") no-repeat 0/100% 100%;
  }

  .top-bar .msg-num {
    position: absolute;
    top: .09rem;
    right: .06rem;
    width: .12rem;
    height: .12rem;
    line-height: .12rem;
    font-size: .08rem;
    background: #F25E44;
    border-radius: 50%;
  }

  .content > div {
    margin-bottom: .1rem;
  }

  /*title*/
  .content .title {
    height: .58rem;
    font-size: .18rem;
    padding: 0 .18rem;
  }

  .content .title > div {
    line-height: .58rem;
  }

  /*英雄榜*/
  .hero-list ul {
    padding: .1rem .14rem 0;
  }

  .hero-list li {
    padding: 0 .04rem;
  }

  .hero-list li > div {
    border-radius: .04rem;
    padding: .2rem 0;
  }

  .hero-list .icon {
    margin: 0 auto .1rem;
    height: .22rem;
  }

  .syl .icon {
    width: .22rem;
    background: url("../../assets/syl.png") no-repeat 0/100% 100%;
  }

  .yk .icon {
    width: .19rem;
    background: url("../../assets/yk.png") no-repeat 0/100% 100%;
  }

  .gsz .icon {
    width: .28rem;
    background: url("../../assets/gsz.png") no-repeat 0/100% 100%;
  }

  .hero-list .text, .hero-list .name, .hero-list .num {
    font-size: .16rem;
    text-align: center;
  }

  .hero-list .photo {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    margin: .2rem auto .1rem;
  }

  .hero-list .num {
    font-size: .18rem;
    margin-top: .2rem;
  }

  /*新闻*/
  .news .title, .news .con, .master .trade {
    border-bottom: 1px solid #333a42;
  }

  .news .con {
    font-size: .16rem;
    padding: .2rem .18rem .4rem;
  }

  .news .text-overflow {
    margin-bottom: .14rem;
  }

  .news .text-overflow-multi {
    line-height: .28rem;
  }

  .handle {
    height: .62rem;
    font-size: .16rem;
  }

  .handle .flex-1 > div {
    display: inline-block;
    height: .22rem;
    line-height: .22rem;
    margin-top: .2rem;
    padding-left: .3rem;
  }

  .fbz {
    background: url("../../assets/fbz.png") no-repeat 0/.21rem 100%;
  }

  .qjy {
    background: url("../../assets/qjy.png") no-repeat 0/.22rem 100%;
  }

  .praise {
    background: url("../../assets/praise2.png") no-repeat 0/.22rem 100%;
  }

  .comment {
    background: url("../../assets/comment.png") no-repeat 0/.22rem 100%;
  }

  /*大师信息*/
  .master .info {
    padding: .2rem .18rem 0;
    height: .65rem;
    font-size: .16rem;
  }

  .info .photo {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    margin-right: .18rem;
  }

  .basic .name {
    margin-bottom: .13rem;
  }

  .info .copy-btn, .info .sell-price {
    width: .8rem;
    height: .3rem;
    line-height: .3rem;
    border-radius: .04rem;
    background: #F25E44;
    margin: .08rem 0 0 .16rem;
  }

  .info .sell-price {
    background: none;
    line-height: .28rem;
    border: 1px solid #F25E44;
  }

  .master .trade {
    padding: .2rem .18rem .4rem;
  }

  .trade .flex {
    height: .49rem;
    background: rgba(255, 83, 63, 0.08);
    border: 1px solid rgba(255, 83, 63, 0.30);
    border-radius: .04rem;
    font-size: .16rem;
  }

  .trade .flex.sell {
    background: rgba(3, 211, 150, 0.08);
    border: 1px solid rgba(3, 211, 150, 0.30);
  }

  .trade .flex > div {
    line-height: .47rem;
  }

  .trade .action {
    padding-left: .18rem;
  }

  .trade .align-r {
    padding-right: .18rem;
  }

  /*入金提示*/
  .content > div.tips {
    height: .64rem;
    background: #F25E44;
    margin: -.1rem 0 0;
    font-size: .16rem;
    padding-top: .16rem;
    position: relative;
  }

  .tips .arrow {
    position: absolute;
    width: .11rem;
    height: .22rem;
    background: url("../../assets/arrow-r-w.png") no-repeat 0/100% 100%;
    top: .21rem;
    right: .18rem;
  }
</style>
